<template>
  <div class="container bg-gray" v-show="isShowPage">
    <div class="title">
      <div class="bold fs-xxl">端口管理</div>
      <el-button type="primary" round size="mini" @click="handleAddPortDialog">添加端口</el-button>
    </div>

    <div class="list" v-if="tableData && tableData.length">
      <PortManagementItem
        class="mt20"
        v-for="item in tableData"
        :key="item.hmUserPortVO.id"
        :portInfo="item.hmUserPortVO"
        :portData="item.portManageCount || {}"
        :portFeature="item.autoRefreshCount || {}"
        @portChange="handlePortChange"
        @showRemarkPop="handleShowRemarkListPop"
      ></PortManagementItem>
    </div>

    <div class="empty" v-if="!(tableData && tableData.length)">
      <el-image style="width: 198px; height: 150px;" :src="require('@/assets/images/port_empty@1x.png')"></el-image>
      <div class="mt30 fs-xxl">您还未绑定端口哦～</div>
      <div class="mt20 fs-sm">绑定端口即可使用一键推房、端口刷新、自动重发等高效功能～</div>
      <el-button class="empty-btn" type="primary" round @click="handleAddPortDialog">添加端口</el-button>
    </div>

    <el-dialog
      class="dialog-radius"
      :visible.sync="isShowRemarkPop"
      :close-on-click-modal="false"
      title="写房评"
      width="800px"
      top="8vh"
    >
      <RemarkHouseListPop v-if="isShowRemarkPop" :id="id" @triggerRemark="handleTriggerRemark"></RemarkHouseListPop>
    </el-dialog>

    <el-dialog
      class="dialog-radius"
      :visible.sync="isShowRemarkDetailInfoPop"
      :close-on-click-modal="false"
      title="写房评"
      width="800px"
    >
      <RemarkDetailInfoPop
        v-if="isShowRemarkDetailInfoPop"
        :id="id"
        :item="currentHouseItem"
        @close="isShowRemarkDetailInfoPop = false"
        @portChange="handlePortChange"
      ></RemarkDetailInfoPop>
    </el-dialog>

    <!-- select add port dialog -->
    <el-dialog class="dialog-radius" title="选择端口" :visible.sync="isShowAddPortDialog" width="800px">
      <PortManagementSelect @addPort="handleAddPort"></PortManagementSelect>
    </el-dialog>

    <!-- add port dialog -->
    <el-dialog
      class="dialog-radius"
      :title="`${currentPortDialogEcho.portTypeName || ''}端口绑定`"
      :visible.sync="isShowPortDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <component
        v-if="isShowPortDialog"
        :is="currentComponentName"
        handleType="add"
        :echoData="currentPortDialogEcho"
        @close="handleCloseAddPort"
        @portChange="handlePortChange"
      ></component>
    </el-dialog>

    <!-- add port by scan dialog -->
    <el-dialog
      class="dialog-radius"
      title="扫码绑定"
      :visible.sync="isShowScanAddPortDialog"
      :close-on-click-modal="false"
      width="500px"
    >
      <PortManagementScan
        :row="currentScanData"
        v-if="isShowScanAddPortDialog"
        @close="isShowScanAddPortDialog = false"
        @portChange="handlePortChange"
      ></PortManagementScan>
    </el-dialog>
  </div>
</template>

<script>
import PortManagementScan from './com/PortManagementScan';
import PortManagementItem from './com/PortManagementItem.vue';
import RemarkDetailInfoPop from './com/RemarkDetailInfoPop.vue';
import PortManagementSelect from './com/PortManagementSelect.vue';
import PortManagementDialog from './com/PortManagementDialog.vue';
import PortManagementXflStore from './com/PortManagementXflStore.vue';
import RemarkHouseListPop from './com/RemarkHouseListPop.vue';
import { resetPortStatus, vipCheckHandler, menuHandler } from '@/handler/menuHandler';
import { PORT_CODE_AJK, PORT_CODE_XFL_MP, PORT_NAME_AJK, PORT_NAME_XFL_MP } from '@/config/house/platform';
import { HOUSE_REMARK } from '@/config/menuId';
import { xflHouseDetail } from '@/api/remark';

export default {
  components: {
    PortManagementXflStore,
    RemarkHouseListPop,
    RemarkDetailInfoPop,
    PortManagementScan,
    PortManagementItem,
    PortManagementSelect,
    PortManagementDialog
  },

  computed: {},

  data() {
    this.constant = {
      PORT_CODE_AJK,
      PORT_CODE_XFL_MP,
      PORT_NAME_AJK,
      PORT_NAME_XFL_MP
    };
    return {
      isShowPage: false,
      isShowAddPortDialog: false,
      isShowPortDialog: false,
      isShowRemarkPop: false,
      isShowRemarkDetailInfoPop: false,
      isShowScanAddPortDialog: false,
      currentComponentName: '',
      currentHouseItem: {},
      tableData: [],
      currentPortDialogEcho: {},
      currentScanData: {},
      id: '', // 单条端口数据的唯一id
      portUserId: '',
    };
  },

  created() {},

  async mounted() {
    await this.getAccountsList();
  },

  beforeDestroy() {
    resetPortStatus();
  },

  methods: {
    handleShowRemarkListPop(data = {}) {
      const { id, portUserId } = data;
      this.id = id;
      this.portUserId = portUserId;
      this.isShowRemarkPop = true;
    },
    // ------------------handle------------------
    // 添加端口弹窗
    handleAddPortDialog() {
      this.isShowAddPortDialog = true;
    },

    // 添加端口
    handleAddPort(e) {
      if (this.checkPortBindStatus(e.code)) {
        this.$message.warning('该端口您已绑定，请删除已绑定端口后再次添加');
        return;
      }
      this.isShowAddPortDialog = false;
      this.currentPortDialogEcho = {
        portType: e.code,
        portTypeName: e.name
      };
      this.isShowPortDialog = true;
      this.currentComponentName =
        e.code === this.PORT_CODE_XFL_STORE ? 'PortManagementXflStore' : 'PortManagementDialog';
    },

    // 端口数据变动
    handlePortChange() {
      this.getAccountsList();
    },

    handleTriggerRemark(e, cb) {
      // 判断该房源的状态 3是审核中
      xflHouseDetail({
        houseId: e.id,
        portUserId: this.portUserId,
        houseType: e.houseType
      })
        .then(({ neighborhoodInfo, lastCommitAuditStatus, vrUrl, haveAuditSuccess }) => {
          const { gaodeLat, gaodeLng } = neighborhoodInfo;
          if (lastCommitAuditStatus === 3) {
            this.$message.error('该房源已有房评正在审核中');
          } else {
            menuHandler
              .call(this, HOUSE_REMARK)
              .then(() => {
                this.isShowRemarkDetailInfoPop = true;
                this.currentHouseItem = {
                  ...e,
                  portUserId: this.portUserId,
                  vrUrl,
                  haveAuditSuccess,
                  coord: { lat: gaodeLat, lng: gaodeLng }
                };
              })
              .catch(() => {});
          }
        })
        .catch(() => {
          this.$message.error('服务器异常！');
        })
        .finally(() => {
          cb && cb();
        });
    },

    // 关闭添加端口
    handleCloseAddPort(e) {
      this.isShowPortDialog = false;
      if (e && e.code === 'LOGIN_SCAN') {
        this.currentScanData = e.data;
        this.isShowScanAddPortDialog = true;
      }
    },

    // ------------------function------------------
    // 加载端口列表数据
    async getAccountsList() {
      try {
        const { content } = await this.$api.getPortAccountListWithData();

        this.tableData = content || [];
      } catch (error) {
        console.log('error', error);
      } finally {
        this.isShowPage = true;
      }
    },

    // 校验端口是否绑定过
    checkPortBindStatus(port) {
      return this.tableData.some((item) => {
        return item.hmUserPortVO.portType === port;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  min-height: calc(100vh - 84px);
  overflow: auto;
}

.title {
  min-width: 900px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 20px 0;
  padding: 0 48px;
  border-radius: 10px;
  height: 80px;
  background-color: #fff;
}

.list {
  padding: 0 20px 20px;
}

.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 120px;

  .empty-btn {
    margin-top: 30px;
    width: 240px;
    height: 48px;
    border-radius: 999px;
    padding: 0;
    font-weight: 700;
  }
}

.dialog-radius /deep/ .el-dialog {
  border-radius: 16px;
}

/deep/ .el-dialog__body {
  padding-top: 10px;
}
</style>
